<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组操作</title>
	</head>
	<body>
		<div id="app">
			<!-- 数组的方法 java中的叫法push：入栈 pop弹栈
			 push（） 在结尾追加元素
			 pop（）  删除最后一个元素
			 shift（） 删除第一个元素
			 unshift（） 在开头追加元素
			 splice（） 替换数组中的数据
			 sort（） 数组排序
			 reverse（） 数组反转
			 -->
			 <h1>数组的操作</h1>
			 	输入框<input type="text" v-model="msg" /><br>
			 <span v-for="(value) in array">
			 {{value}},</span>
			 <br>
			 
				<button @click="push()">push</button>
				<button @click="pop()">pop</button>
				<button @click="shift()">shift</button>
				<button @click="unshift()">unshift</button>
				<button @click="splice()">替换</button>
			 
		</div>
		<script src="../js/vue.js" ></script>
		<script >
			const APP=new Vue({
				el: "#app",
				data: {
					msg: "",
					array: ["a","b","c"]
				},
				methods:{
					push(){
						this.array.push(this.msg)
					},
					pop(){
						//数组的数据会自动的更新
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					unshift(){
						//在开头追加
						this.array.unshift(this.msg)
					},
					splice(){
						/**
						* 参数: 3个参数
						* 		arg1: 操作数据的起始位置 从0开始
						* 		arg2: 操作的数量     阿拉伯数字
						* 		arg3: 替换后的数据.可以有多个(可变参数类型)
						* 案例:
						* 		1.将第一个元素,替换为msg
						* 			this.array.splice(0,1,this.msg)
						* 		2.将前2个元素替换为msg
						* 			this.array.splice(0,2,this.msg) 前2个替换
						* 			this.array.splice(0,2,this.msg,this.msg) 前2个替换,补齐2个数据
						* 		3.将最后一个替换为msg
						* 			let index = this.array.length - 1;
						this.array.splice(index,1,this.msg)
						4.删除第二个元素
						*/
						//如果只有2个参数,则表示删除
						this.array.splice(1,1) 
					}
					
				}
			})
		</script>
	</body>
</html>
